import React from 'react';
import { Link } from 'dva/router';
import PropTypes from 'prop-types';
import { Table, Modal } from 'antd';
import DropMenu from './../../../components/Dropdown/Dropdown';
const confirm = Modal.confirm;

const List = ({ onDeleteItem, onEditItem, onChange, pagination, dataSource, loading }) => {
    const DropProps = {
        title: '操作',
        menuList:[{
            key: 'edit',
            IconType: 'edit',
            title: '编辑'
        },{
            key: 'delete',
            IconType: 'close',
            title: '删除'
        }],
        handleMenuClick(ID,type){
            if (type === 'edit') {
                onEditItem(ID)
            } else if (type === 'delete') {
                confirm({
                    title: 'Are you sure delete this record?',
                    onOk () {
                        onDeleteItem(ID)
                    },
                })
            }
        }
    };

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            width: 150,
            fixed: 'left',
            render: (text,record) => <Link to={`user/${record.id}`}>{text}</Link>,
        }, {
            title: 'NickName',
            dataIndex: 'nickName',
            key: 'nickName',
        }, {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: 'Email',
            dataIndex: 'email',
            key: 'email',
        }, {
            title: 'Phone',
            dataIndex: 'phone',
            key: 'phone',
        }, {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        }, {
            title: 'Operation',
            key: 'operation',
            width: 100,
            fixed: 'right',
            render: (record) => (
                <DropMenu ID={record.id} {...DropProps}/>
            ),
        },
    ];

    const tableOptions = {
        columns: columns,
        dataSource,
        loading,
        bordered: true,
        pagination: {
            total: pagination.total,
            current: pagination.current,
            pageSize: pagination.pageSize,
            onChange: onChange,
            showSizeChanger: true,
            onShowSizeChange: onChange
        },
        rowKey(record){
            return record.id;
        }
    };

    return (
        <div>
            <Table {...tableOptions} scroll={{ x: 600 }} />
        </div>
    )
};

List.propTypes = {
    onDeleteItem: PropTypes.func,
    onEditItem: PropTypes.func,
    location: PropTypes.object,
};

export default List;
